<template>
  <div class="restaurant-detail-page">
    <el-container>
      <el-header class="header">
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-image :src="restaurant.image" fit="cover" class="restaurant-image"></el-image>
          </el-col>
          <el-col :span="12">
            <div class="restaurant-info">
              <h1>{{ restaurant.name }}</h1>
              <p>{{ restaurant.description }}</p>
              <el-rate v-model="restaurant.rating" disabled show-score text-color="#ff9900"></el-rate>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="24">
            <h2 class="section-title">菜品列表</h2>
            <el-row>
              <el-col :span="6" v-for="dish in restaurant.dishes" :key="dish.name">
                <el-card class="dish-card" shadow="hover">
                  <el-image :src="dish.image" fit="cover" class="dish-image"></el-image>
                  <div class="dish-info">
                    <h4>{{ dish.name }}</h4>
                    <p>{{ dish.price }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="24">
            <h2 class="section-title">用户评价</h2>
            <el-timeline>
              <el-timeline-item
                v-for="comment in restaurant.comments"
                :key="comment.id"
                :timestamp="comment.date"
                placement="top">
                <el-card>
                  <h4>{{ comment.user }}</h4>
                  <p>{{ comment.content }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form ref="commentForm" :model="newComment" label-width="80px">
              <el-form-item label="您的评论">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入评论内容"
                  v-model="newComment.content">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitComment" icon="el-icon-check">提交评论</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      restaurant: {
        name: '家常菜馆',
        image: require('@/img/img_1.png'), // 假设这是餐厅图片的路径
        description: '提供地道的家常菜肴，口味正宗，服务热情。',
        rating: 4.7,
        dishes: [
          { name: '菠萝咕噜肉', price: '30元', image: require('@/img/img_5.png') },
          { name: '蒜蓉孜然烤香菇', price: '25元', image: require('@/img/img_6.png') },
          { name: '虎皮鸡爪', price: '29元', image: require('@/img/img_7.png') }
        ],
        comments: [
          { id: 1, user: '张三', content: '菜品味道非常好，服务也很周到。', date: '2024-11-30' },
          { id: 2, user: '李四', content: '性价比很高的一家店，推荐！', date: '2024-12-01' }
        ]
      },
      newComment: {
        user: '匿名用户', // 这里可以设置为当前登录用户的名字
        content: '',
        date: ''
      },
      nextCommentId: 3 // 用于生成新的评论ID
    }
  },
  methods: {
    submitComment () {
      if (this.newComment.content.trim() === '') {
        this.$message.error('评论内容不能为空！')
        return
      }
      this.newComment.date = new Date().toLocaleString()
      this.restaurant.comments.push({
        ...this.newComment,
        id: this.nextCommentId++
      })
      this.newComment.content = '' // 清空输入框
      // 这里可以添加发送到后端的代码
    },
    handleSelect (key) {
      switch (key) {
        case '1':
          this.$router.push({ name: 'home' })
          break
        case '2':
          this.$router.push({ name: 'restaurant-management' })
          break
        case '3':
          this.$router.push({ name: 'restaurant-detail' })
          break
        case '4':
          this.$router.push({ name: 'user-profile' })
          break
        default:
          // 默认处理或错误处理
          break
      }
    }
  }

}
</script>

<style scoped>

.header {
  background-color: #f5f5f5;
  text-align: center;
  padding: 5px 0;
}

.restaurant-image {
  width: 100%;
  height: 300px;
  border-radius: 8px;
}

.dish-image {
  width: 100%;
  height: 150px;
  border-radius: 8px 8px 0 0;
  display: block;
}

.dish-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.dish-info {
  text-align: center;
  padding: 10px;
}

.dish-info h4 {
  margin: 0;
  font-size: 1.2em;
  color: #333;
}

.dish-info p {
  margin: 5px 0 0 0;
  color: #666;
}

.section-title {
  color: #333;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.el-timeline {
  margin-top: 20px;
}

.el-timeline-item__content {
  padding: 10px 20px;
}

.el-form-item__label {
  font-size: 1.1em;
  color: #666;
}

.el-button {
  width: 100%;
}

/* Add some transitions for a smoother experience */
.el-card {
  transition: transform 0.3s ease;
}

.el-card:hover {
  transform: translateY(-10px);
}
</style>
